<script setup>
import router from '@/router/index'
import { ref } from 'vue'
const hotList = ref([
  'Caramel',
  'Amelie Wang',
  'Kenzo',
  'Dolce & Cabbana',
  'Gucci',
  'Burberry'
])
const LocalStorageKey = 'searchHistory'
const historyList = ref(
  localStorage.getItem(LocalStorageKey) ? [...localStorage.getItem(LocalStorageKey).split(',')] : []
)
const isSearch = ref(false)
const input = ref()
const onDelete = () => {
  localStorage.removeItem(LocalStorageKey)
  historyList.value = []
}
const onFocus = () => {
  isSearch.value = true
}

const onCancleSearch = () => {
  isSearch.value = false
}
import { showToast } from 'vant'
const onKeypress = () => {
  const inputStr = input.value.value.trim()
  if (!inputStr) {
    showToast('请输入文字')
    retrun
  }

  const locatStr = localStorage.getItem(LocalStorageKey)
  if (!locatStr) {
    localStorage.setItem(LocalStorageKey, input.value.value)
  }
  else {
    const array = [...localStorage.getItem(LocalStorageKey).split(',')]
    const newArr = array.filter((item) => {
      return item !== input.value.value
    })
    newArr.unshift(input.value.value)
    localStorage.setItem(LocalStorageKey, newArr.join(','))
  }

  historyList.value = [
    ...localStorage.getItem(LocalStorageKey).split(',')
  ]
}

const onHotClick = async (item) => {
  await Promise.all([input.value.value = item, isSearch.value = true])
  onKeypress()
}

</script>

<template>
  <!-- nav -->
  <div class="nav">
    <van-icon class="back" name="arrow-left" @click="router.go(-1)" />
    <div class="search">
      <input ref="input" type="text" id="" placeholder="请输入" @keypress.enter="onKeypress" @focus="onFocus"
        :class="{ 'not-on-focus': isSearch === false, 'on-focus': isSearch === true }">
      <span v-if="isSearch" class="cancle-btn" @click="onCancleSearch">取消</span>
    </div>
  </div>

  <!-- 静态 -->
  <div class="main" v-if="!isSearch">
    <div class="hot-title">
      热门搜索
    </div>
    <div class="hot-grid">
      <span class="hot-grid-item" v-for="item in hotList" :key="item" @click="onHotClick(item)">{{ item }}</span>
    </div>

    <div class="history-title">
      <span class="left">历史搜索</span>
      <van-icon name="delete-o" @click="onDelete" />
    </div>
    <div class="history-list">
      <div class="cell" v-for="item in historyList" :key="item">
        {{ item }}
      </div>
    </div>
  </div>

  <!-- 动态 -->
  <div class="search-list" v-else>
    <div class="list">
      <div class="item" v-for="item in 10" :key="item">
        <img class='shop-image' src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="">
        <div class="price">
          <span class="min-price">￥ 2680.00</span>
          <span class="max-price">￥ 6680.00</span>
        </div>
        <div class="name">
          Bonpiont
        </div>
        <span class="zhe">
          7折
        </span>
      </div>
    </div>
    <div class="loading">- 加载更多 -</div>
  </div>
</template>

<style lang="scss" scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 90px;
  width: 100%;
  display: flex;
  z-index: 999;
  align-items: flex-end;
  background-color: white;

  .back {
    margin-left: 6px;
    margin-bottom: 10px;
  }

  .van-icon-arrow-left:before {
    font-size: 24px;
    color: orange;
  }

  .search {
    flex: 1;
    margin-right: 10px;
    height: 30px;
    margin-bottom: 8px;

    .not-on-focus {
      padding: 0 10px;
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 15px;
    }

    .on-focus {

      padding: 0 10px;
      display: inline-block;
      width: 80%;
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 15px;
    }

    .cancle-btn {
      color: #333;
      font-size: 16px;
      margin-left: 16px;
      display: inline-block;
      height: 30px;

    }

  }
}

.main {
  height: 100%;
  //padding-top: 90px;
  margin-top: 90px;
  padding-left: 10px;

  .hot-title {
    height: 40px;
    color: #333;
    font-size: 14px;
    //padding-left: 10px;
    padding-top: 20px;
  }

  .hot-grid {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 40px;

    .hot-grid-item {
      padding: 3px 5px;
      background-color: #f0f0f0;
      display: inline-block;
      color: #999;
      font-size: 14px;
    }
  }

  .history-title {
    margin-top: 10px;
    height: 30px;
    //padding-left: 10px;
    padding-right: 15px;
    display: flex;
    justify-content: space-between;

    .left {
      color: #999;
      font-size: 14px;
    }

    .van-icon-delete-o:before {
      font-size: 16px;
    }
  }

  .history-list {
    padding-right: 10px;
    display: flex;
    flex-direction: column;

    .cell {
      overflow: hidden;
      font-size: 14px;
      color: #999;
      line-height: 30px;
      width: 100%;
    }
  }
}

.search-list {
  height: 100%;
  //padding-top: 90px;
  margin-top: 90px;
  padding-left: 10px;

  .list {
    display: flex;
    flex: 1;
    margin-left: 10px;
    margin-right: 0;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 40px;

    .item {
      display: block;
      width: 40%;
      height: 220px;
      background-color: #fff;
      margin-right: 10px;
      margin-bottom: 10px;

      .shop-image {
        width: 100%;
        height: 70%;
      }

      .price {
        width: 100%;

        .min-price {
          width: 50%;
          font-size: 12px;
          color: red;
        }

        .max-price {
          width: 50%;
          font-size: 10px;
          color: #333;
          text-decoration: line-through;
        }
      }

      .name {
        font-size: 12px;
        color: #333;
      }

      .zhe {
        font-size: 12px;
        color: red;
        padding: 3px 5px;
        border: 1px solid red;
        border-radius: 3px;
      }
    }
  }

  .loading {
    height: 40px;
    width: 100%;
    text-align: center;
    background-color: #fff;
    line-height: 40px;
    font-size: 14px;

  }
}
</style>